<template lang="pug">
  v-dialog(v-model="active" persistent=true max-width="70vw")
    v-card
      v-card-title 新增客户
      v-card-text.pa-0
        CustomerForm(ref="form", :customer = "customer", solo="true")
      v-card-actions
        v-spacer
        v-btn(text @click="cancel") 取消
        v-btn(text color="primary" @click="confirm") 确定
</template>

<script lang="ts">
  import Vue, {VueConstructor} from 'vue'
  import CustomerForm from './customer_form'
  import {Customer} from '@/store/modules/types/Customer'

  export default (Vue as VueConstructor<Vue & {
    buildEmptyCustomer: () => Customer,
    $refs: {
      form: CustomerForm
    }
  }>).extend({
    name: 'customer_create_dialog_solo',
    components: { CustomerForm },
    methods: {
      buildEmptyCustomer(): Customer {
        return {
          name: null,
          address: null,
          tel: null,
          email: null,
          contact_name: null,
          contact_tel: null,
          contact_email: null,
          identify_code: null
        }
      },
      toggle() {
        this.active = !this.active
        this.customer = this.buildEmptyCustomer()
        this.$refs.form && this.$refs.form.reset()
      },
      cancel() {
        this.toggle()
      },
      confirm() {
        let vm = this;
        this.$refs.form.save().then((customer: Customer)=> {
          this.$emit('success', customer)
          vm.toggle()
        })
      }
    },
    data() {
      let _emptyCustomer = this.buildEmptyCustomer()
      return {
        active: false,
        customer: _emptyCustomer
      }
    }
  })
</script>